/* ============================ 第三方-swal2 ============================*/
.swal2-z-index-top {
    z-index: 99999 !important;
}
.swal2-actions .swal2-cancel, .swal2-actions .swal2-confirm { /* 弹窗按钮 */
    margin-right: 20px;
}

/* ============================ 第三方-Progress ============================*/
#nprogress .bar {
    background: #ec0a49;  /* 进度条颜色 */
    height: 2px;          /* 进度条高度 */
}
#nprogress .peg {         /* 进度条完成后的样式 */
    box-shadow:
    0 0 10px #29d,
    0 0 5px #29d;
}
#nprogress .spinner-icon {
    border-top-color: #29d;
    border-left-color: #29d;
}

/* ============================ 第三方-Tippy ============================*/
.tippy-box {
    background-color: var(--tippy-bg) !important;
    color: var(--tippy-text) !important;
}

/* ============================ 第三方-VXE Table ============================*/
[data-vxe-ui-theme="dark"] {
    --vxe-ui-layout-background-color: #2c2e2f;
    --vxe-ui-table-header-background-color: #2c2e2f;
}

/* ============================ 自定义 ============================*/
.force-hide {
    display: none !important;
}

/* ============================ 主样式 ============================*/
:root {
    /* tippy 提示框 */
    --tippy-bg: #2c2e2f;
    --tippy-text: #ffffff;

    /* 顶部工具栏 */
    --toolbar-simple-mode-color: #ffffff;
    --toolbar-dark-mode-color: #fbc700;

    /* 左侧菜单 */
    --menu-bg: #d4edda;
    --menu-color: #515c6b;
    --menu-item-bg: #d6d8d9;
    --menu-item-color: red;

    /* 搜索栏 */
    --search-color: #666;
    --search-border-focus: 2px solid #7347ff;
    --search-web-desc: #666;
    --mark-bg: #E3F2FD;
    --mark-text: #0D47A1;

    /* 热门网站 */
    --top-sites-color: #004499;

    /* 图片背景层 */
    --wallpaper-alpha: 0;
    --wallpaper-filter: 0;
}

/* ============================ 页面 ============================*/
/* 深色模式 */
body.io-black-mode {
    /* tippy提示框 */
    --tippy-bg: #a8d8b9;
    --tippy-text: #2c2e2f;

    /* 顶部工具栏 */
    --toolbar-simple-mode-color: #cacdd2;
    --toolbar-dark-mode-color: #cacdd2;

    /* 左侧菜单 */
    --menu-bg: #cce5ff;
    --menu-color: #000000;
    --menu-item-bg: transparent; /* 直接指定透明色替代 unset */
    --menu-item-color: #7952b3;

    /* 搜索栏 */
    --search-color: #fff;
    --search-web-desc: #ffffff;
    --mark-bg: transparent;
    --mark-text: #d4237a;

    /* 热门网站 */
    --top-sites-color: #5a48bd;
}

/* ============================ 页面-指针 ============================*/
/* 不定义任何 --custom-cursor，默认使用浏览器原生光标 */
/* 【提示】当 <input type="color"> 或 <select> 等原生表单控件被点击时，浏览器会显示系统级弹窗/下拉框，这些弹窗的鼠标样式由操作系统或浏览器控制，不受网页 CSS 影响 */
body.custom-cursor-enabled div,
body.custom-cursor-enabled button,
body.custom-cursor-enabled label,
body.custom-cursor-enabled select,
body.custom-cursor-enabled input,
body.custom-cursor-enabled img,
body.custom-cursor-enabled span,
body.custom-cursor-enabled p,
body.custom-cursor-enabled a {
    cursor: var(--custom-cursor, auto) !important; /* 仅当 JS 动态设置了 --custom-cursor 时才生效 */
}

/* ============================ 页面-顶部栏 ============================*/
/* 用户中心 */
.user-setting-icon {
    font-size: 19px !important;
    padding-top: 12px !important;
    transition: color 0.3s ease !important;
    color: #ffffff !important;
}

/* ============================ 页面-左侧栏 ============================*/
/* 左侧菜单 */
.sidebar-show > a{
    background-color: var(--menu-bg) !important;
    color: var(--menu-color) !important;
}

/* 左侧菜单子项 */
.sidebar-show > ul > li > a.active {
    background-color: var(--menu-item-bg) !important;
    color: var(--menu-item-color) !important;
}

/* ============================ 页面-搜索栏 ============================*/
.header-big #search-text {
    color: var(--search-color);
}
/* 搜索提示 - 位于搜索框下方并对齐 */
.card.search-smart-tips {
    position: absolute;                 /* 绝对定位 */
    top: calc(var(--search-size) * 2%); /* 紧挨着搜索框下方 */
    left: 0;                            /* 左对齐 */
    width: 100%;                        /* 宽度为搜索框的宽度 */
}

#search {
    --search-radius: 8px;
    --search-height: 80px;
    --search-opacity: 1;

    width: 100%;
    opacity: var(--search-opacity);
    transition: all 0.3s ease;
    padding-bottom: var(--search-height) !important;
}
.super-search-fm {
    --search-size: 100%;
    --search-width: 100px;

    width: var(--search-width);
    max-width: 100%;
    min-height: 50px;
}

#search-text {
    border-radius: var(--search-radius) !important;
}

#search #search-list {
    margin-top: 0; /* 控制搜索框和二级菜单的上边距 */
}

#word .submenu-item {
    padding-left: 10px !important;
}

#word .search-web-desc {
    color: var(--search-web-desc) !important;
}
#word .empty-search-result {
    color: var(--search-web-desc) !important;
}

mark {
    background-color: var(--mark-bg) !important;
    color: var(--mark-text) !important;
}

/* ============================ 页面-网站 ============================*/
#content .row .url-body:hover > a .card-body .url-info strong {
    color: #f1404b !important; /* 网站卡片悬浮时，网站标题颜色样式 */
}
/* ============================ 页面-热门网站 ============================*/
.top-sites > .badge {
    font-size: 15px;
    text-decoration: underline;
    margin-bottom: 10px;
    color: var(--top-sites-color);
    transition: color 0.3s ease;
}

/* ============================ 页面-壁纸切换 ============================*/
.windmill {
    position: fixed;
    right: 20px;
    bottom: 0;
    display: flex;
    flex-direction: column;
}
.windmill img {
    z-index: 1; /* 确保在内容下层 */
    cursor: pointer;
    width: 40px;
    height: 40px;
}
.windmill span {
    display: block;
    margin-top: -30px;
    margin-left: auto;
    margin-right: auto;
    width: 5px;
    height: 56px;
    background-color: #fefefe;
    transform: perspective(20px) rotateX(5deg); /* 3D透视效果 */
}

/* 旋转动画 */
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.spinning {
    animation: spin 2s linear infinite;
}

/* ============================ 页面-用户中心-基础样式 ============================*/
/* 毛玻璃效果背景 */
.glass-card {
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

/* ============================ 页面-用户中心-模态框 ============================*/
.modal.right .modal-dialog {
    position: fixed;
    margin: auto;
    right: -5px;
    width: 100%;
    max-width: 100%;
    height: 100%;
    transform: translate3d(100%, 0, 0);
    transition: transform 0.3s ease-out;
}
.modal.right.show .modal-dialog {
    transform: translate3d(0, 0, 0);
}
.modal.right .modal-content {
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
}
.modal.right .modal-body {
    height: 100%;
    width: 420px;
    overflow-y: auto;
    overflow-x: hidden;
}
.modal.right .modal-lg {
    max-width: 420px;
    margin-left: auto;
    margin-right: 0;
}

/* ============================ 页面-用户中心-表单-按钮 ============================*/
.btn {
    padding: 8px 16px;
    font-size: 14px;
    border-radius: 6px;
    transition: all 0.2s ease;
}
.btn-outline-secondary {
    border-color: #ddd;
}
.btn-primary {
    background-color: #007bff;
    border-color: #007bff;
}
.btn-primary:hover {
    background-color: #0069d9;
    border-color: #0062cc;
}

/* ============================ 页面-用户中心-表单-颜色选择器 ============================*/
.form-control-color {
    width: 2.5rem;
    height: 2.5rem;
    padding: 0.15rem;
    cursor: pointer;
}

/* ============================ 页面-用户中心-设置-壁纸 ============================*/
.layer {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0
}

.wallpaper {
    position: fixed;                        /* 固定定位 */
    z-index: -1;                            /* 确保在内容下层 */;
    height: 100vh;                          /* 使用视口单位 */;
    width: 100vw;
    background-size: cover;                 /* 调整图片大小 */
    background-position: center;            /* 调整图片位置 */
    background-attachment: fixed;           /* 增强固定效果 */
    background-repeat: no-repeat;           /* 防止图片重复 */
    filter: blur(var(--wallpaper-filter));
    bottom: calc(var(--wallpaper-filter)*-2);
    left: calc(var(--wallpaper-filter)*-2);
    right: calc(var(--wallpaper-filter)*-2);
    top: calc(var(--wallpaper-filter)*-2);
    transform: translateZ(0);              /* 创建独立的合成层，解决弹窗打开/关闭时的偏移问题 */
    /* 优化性能 */
    will-change: transform;                /* 提前告知浏览器可能的变化 */
    backface-visibility: hidden;
}

.wallpaper.ready {
    transition: background-image .3s,background-color .2s;
    will-change: background-image
}

.wallpaper-mask {
    height: 100%;
    background-color: rgba(0,0,0,var(--wallpaper-alpha))
}

/* 壁纸切换 */
#wallpaperCarouse .carousel-control-prev,
#wallpaperCarouse .carousel-control-next {
    width: 50%;
    background: none;
    border: none;
    opacity: 0;
    transition: opacity 0.15s ease;
}
#wallpaperCarouse .carousel-control-prev:hover,
#wallpaperCarouse .carousel-control-next:hover {
    opacity: 0.9;
}
#wallpaperCarouse .carousel-control-prev-icon,
#wallpaperCarouse .carousel-control-next-icon {
    background-size: 100%, 100%;
}

/* ============================ 页面-用户中心-风格-查看配置-模态框 ============================*/
.modal.center .modal-dialog {
    margin: auto;
    width: 100%;
    max-width: 100%;
    height: auto;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) !important; /* 居中关键代码 */
    transition: transform 0.3s ease-out, opacity 0.3s ease-out;
    opacity: 0;
}
.modal.center.show .modal-dialog {
    transform: translate3d(0, 0, 0);
    opacity: 1;
}
.modal.center .modal-content {
    height: auto;
    max-height: 90vh;
    overflow-y: auto;
    overflow-x: hidden;
}
.modal.center .modal-body {
    height: auto;
    width: 100%;
    overflow-y: auto;
    overflow-x: hidden;
}
.modal.center .modal-lg {
    max-width: 50%;
    margin-left: auto;
    margin-right: 0;
}

@media (max-width: 576px) {
    .modal.center .modal-dialog {
        max-width: 95%;
    }
}

/* ============================ 页面-用户中心-风格-查看配置-模态框-表格 ============================*/
.table td {
    vertical-align: middle !important;    /* 合并单元格垂直居中 */
}
.table-responsive {
    max-height: 80vh;
    overflow-y: auto;
}
.table-fixed-header {
    position: relative;
    max-height: 60vh;                     /* 小于 table-responsive，避免滚动时表格标题也移动 */
    overflow-x: hidden;
    margin-bottom: 50px;                  /* 留出底部空间给表格 */;
}
.table-fixed-header thead th {
    vertical-align: middle;               /* 垂直居中 */
    white-space: nowrap;                  /* 禁止换行 */
    position: sticky;                     /* 固定表头 */
    top: -1px;                            /* 上移1像素补偿边框 */
    z-index: 10;
    padding: 8px;                         /* 统一内边距 */
}
.table-fixed-header table {
    margin-bottom: 0;                     /* 去除底部边距 */
}
/* 只针对特定列 */
td.no-wrap {
    white-space: nowrap !important;       /* 禁止换行 */
}

/* ============================ 页面-内容-右键菜单 ============================*/
.context-menu {
    display: none;
    z-index: 1000;
    top: 70px !important;
    left: 120px !important;
    min-width: 160px;
    padding: 5px 0;
    color: #ffffff !important;
    background-color: #90ad37 !important;
    border: 1px solid rgba(0,0,0,.15);
    border-radius: 4px;
}
.context-menu.show {
    display: block;
}
.context-menu .dropdown-item {
    padding: 8px 16px;
    cursor: pointer;
}
.context-menu .dropdown-item:hover {
    color: #fff;
}